<template>
  <div class="userInfo">
    <el-card class="box-card">
      <div class="card-header">
        <span class="span">用 户 详 情</span>
      </div>
      <el-table :data="userTable">
        <el-table-column prop="account" label="账号"> </el-table-column>
        <el-table-column prop="level" label="用户等级"> </el-table-column>
        <el-table-column prop="classid">
          <template v-slot="scope">
            <el-button @click="update(scope.row)">修改信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="修改用户信息" v-model="dialogVisible" width="40%">
      <el-form
        :label-position="labelPosition"
        label-width="75px"
        :model="updateForm"
      >
        <el-form-item label="用户等级">
          <el-select v-model="updateForm.level" placeholder="请选择" class="option" value-key>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="button" @click="modifyPermissions">修改权限</el-button>
        </el-form-item>
        <el-form-item label="修改密码">
          <el-input v-model="userPassword" show-password class="passwordInput"></el-input>
          <el-button type="button" @click="changePassword">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { path } from "../../config.json";
import { ElMessage } from "element-plus";
import crypto from "crypto";
export default {
  name: "UserInfo",
  data() {
    return {
      userPassword: '',
      userLevel: '',
      userTable: [],
      updateForm: {
        account: 0,
        level: "",
      },
      dialogVisible: false,
      options: [
        {
          value: '学生',
          label: '学生'
        }, 
        {
          value: '管理员',
          label: '管理员'
        }],
    };
  },
  methods: {
    update(row) {
      this.updateForm = row;
      this.dialogVisible = true;
      this.userLevel = row.level;
    },
    modifyPermissions(){
      if (this.userLevel == this.updateForm.level){
        ElMessage.error("修改失败，用户当前权限与选择权限相同无需修改！");
        return;
      };
      axios({
        headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
        method: "post",
        url: path + "/user/updateLevelByAccount",
        data: {
          account: this.updateForm.account,
          levelname: this.updateForm.level
        },
      }).then((res) => {
        let i = res.data;
        if (i == 1) {
          this.dialogVisible = false;
          ElMessage.success({
            message: "修改成功",
            type: "success",
          });
        } else {
          ElMessage.error("修改失败，请重试！");
        }
      });
    },
    changePassword(){
      let password = this.userPassword;
      axios({
        headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
        method: "post",
        url: path + "/user/updatePasswordByAccount",
        data: {
          account: this.updateForm.account,
          password: crypto.createHash('md5').update(password).digest('hex'),
        },
      }).then((response) => {
        let i = response.data;
        if (i == 1) {
          this.dialogVisible = false;
          ElMessage.success({
            message: "修改成功",
            type: "success",
          });
        } else {
          ElMessage.error("修改失败，请重试！");
        }
      });
    }
  },
  mounted() {
    axios({
      headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
      method: "post",
      url: path + "/user/findAllUser",
      data: {},
    }).then((response) => {
      this.userTable = response.data;
      for (let user of this.userTable) {
        if (user.level == "s") user.level = "学生";
        else user.level = "管理员";
      }
    });
  },
};
</script>
<style  scoped>
.button {
  float: right;
}
.box-card {
  height: 90vh;
}
.option{
  float: left;
}
.passwordInput{
  width: 220px;
  float: left;
}
.card-header {
  margin-bottom: 1%;
}
.span{
  float:left;
  font-size:130%;
}
</style>
